<script setup lang="ts">
import { ref } from 'vue'

// 团队成员数据
const teamMembers = ref([
  { name: '石XX', role: '项目负责人', avatar: '👨‍💼' },
  { name: '覃XX', role: '项目负责人', avatar: '👩‍💼' },
  { name: '曲XX', role: '前端开发', avatar: '👨‍💻' },
  { name: '程XX', role: '后端开发', avatar: '👨‍💻' },
  { name: '溪XX', role: '数据处理', avatar: '👩‍🔬' },
  { name: '周XX', role: '数据处理', avatar: '👨‍🔬' },
  { name: '董XX', role: '数学建模', avatar: '👨‍🎓' },
  { name: '刁XX', role: '数学建模', avatar: '👩‍🎓' }
])

// 指导教师数据
const teachers = ref([
  { name: '毛睿老师', title: '指导教师', description: '致力于推动创新实践项目的发展' },
  { name: '王会勇老师', title: '指导教师', description: '专业指导与技术支持' },
  { name: '徐增敏老师', title: '指导教师', description: '学术指导与方向把控' },
  { name: '唐敏老师', title: '指导教师', description: '项目管理与团队建设' }
])

// 部门数据
const departments = ref([
  {
    icon: '📌',
    name: '算法部',
    description: '以培养优秀的算法工程师为目标。夯实基础、掌握算法思想，提升逻辑建模与解决问题的能力，为算法竞赛和未来职业打下坚实基础。',
    color: '#667eea'
  },
  {
    icon: '📊',
    name: '大数据部',
    description: '致力于数据研发工程师培养，掌握数据挖掘、可视化、统计建模等关键技能，能处理复杂海量数据。',
    color: '#f093fb'
  },
  {
    icon: '💻',
    name: '软件部',
    description: '专注于计算机技术应用，包括 Web 开发、移动端、云计算、DevOps 等领域，培养全面的开发能力。',
    color: '#4facfe'
  },
  {
    icon: '🔐',
    name: '信安部',
    description: '涉猎木马编程、网络渗透、逆向工程、CTF 等方向，致力于安全领域探索与实战应用。',
    color: '#43e97b',
    note: '(Is still alive??)'
  }
])
</script>

<template>
  <div class="about-container">
    <!-- 页面头部 -->
    <div class="page-header">
      <h1>🎓 关于我们</h1>
      <p>数学与计算科学学院创新实践基地 · 图书管理系统</p>
    </div>

    <!-- 致谢部分 -->
    <div class="section-card">
      <div class="card-header">
        <h2>🙏 致谢</h2>
      </div>
      <div class="card-content">
        <p class="thanks-text">
          首先感谢 <strong>桂林电子科技大学数学与计算科学学院</strong> 对本团队的培养，提供了这样一个平台。
        </p>
        <p class="thanks-text">
          感谢 <strong>指导教师毛睿老师</strong> 的支持和指导，毛老师一直致力于推动创新实践项目的发展，
          本项目的启动与团队组建离不开毛老师的努力与付出。
        </p>
      </div>
    </div>

    <!-- 项目介绍 -->
    <div class="section-card">
      <div class="card-header">
        <h2>📚 项目介绍</h2>
      </div>
      <div class="card-content">
        <p class="project-desc">
          我是数学与计算科学学院创新实践基地的曲XX，本项目为一套图书管理系统，包含完整的前后端架构，
          当前页面为前端展示部分。此项目是我独立制作，开发团队其他人均未参加
        </p>
        <div class="project-status">
          <el-tag type="success" size="large">🚀 积极开发中</el-tag>
          <el-tag type="info" size="large">📱 前后端分离</el-tag>
          <el-tag type="warning" size="large">⭐ 创新实践项目</el-tag>
        </div>
      </div>
    </div>

    <!-- 开发团队 -->
    <div class="section-card">
      <div class="card-header">
        <h2>👥 开发团队</h2>
      </div>
      <div class="card-content">
        <div class="team-grid">
          <div
              v-for="member in teamMembers"
              :key="member.name"
              class="team-member"
          >
            <div class="member-avatar">{{ member.avatar }}</div>
            <div class="member-info">
              <h4>{{ member.name }}</h4>
              <p>{{ member.role }}</p>
            </div>
          </div>
        </div>
        <div class="team-note">
          <p>💡 未来还会有更多优秀成员加入开发与维护工作。</p>
        </div>
      </div>
    </div>

    <!-- 指导教师 -->
    <div class="section-card">
      <div class="card-header">
        <h2>👨‍🏫 指导教师</h2>
      </div>
      <div class="card-content">
        <div class="teachers-grid">
          <div
              v-for="teacher in teachers"
              :key="teacher.name"
              class="teacher-card"
          >
            <div class="teacher-avatar">👨‍🏫</div>
            <div class="teacher-info">
              <h4>{{ teacher.name }}</h4>
              <p class="teacher-title">{{ teacher.title }}</p>
              <p class="teacher-desc">{{ teacher.description }}</p>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 组织介绍 -->
    <div class="section-card">
      <div class="card-header">
        <h2>🏛️ 组织介绍</h2>
      </div>
      <div class="card-content">
        <div class="organization-info">
          <h3>数学与计算科学学院创新实践基地</h3>
          <div class="values">
            <el-tag class="value-tag" type="primary">真实</el-tag>
            <el-tag class="value-tag" type="success">专注</el-tag>
            <el-tag class="value-tag" type="warning">卓越</el-tag>
            <el-tag class="value-tag" type="danger">不设限</el-tag>
            <el-tag class="value-tag" type="info">创新</el-tag>
          </div>
          <p class="organization-desc">
            创新基地以培养高素质复合型人才为目标，设有多个技术部门，开展多维度能力提升与实践。
          </p>
        </div>
      </div>
    </div>

    <!-- 部门介绍 -->
    <div class="section-card">
      <div class="card-header">
        <h2>🏢 部门介绍</h2>
      </div>
      <div class="card-content">
        <div class="departments-grid">
          <div
              v-for="dept in departments"
              :key="dept.name"
              class="department-card"
              :style="{ borderLeft: `4px solid ${dept.color}` }"
          >
            <div class="dept-header">
              <span class="dept-icon">{{ dept.icon }}</span>
              <h4>{{ dept.name }}</h4>
              <span v-if="dept.note" class="dept-note">{{ dept.note }}</span>
            </div>
            <p class="dept-desc">{{ dept.description }}</p>
          </div>
        </div>
      </div>
    </div>
    <div class="page-footer">
      <p>© 2025 桂林电子科技大学数学与计算科学学院创新实践基地</p>
      <p>图书管理系统</p>
    </div>
  </div>
</template>

<style scoped>
.about-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
  min-height: calc(100vh - 64px);
}

/* 页面头部 */
.page-header {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  padding: 40px;
  border-radius: 12px;
  text-align: center;
  margin-bottom: 24px;
  box-shadow: 0 4px 20px rgba(102, 126, 234, 0.3);
}

.page-header h1 {
  margin: 0 0 8px 0;
  font-size: 32px;
  font-weight: 600;
}

.page-header p {
  margin: 0;
  font-size: 16px;
  opacity: 0.9;
}

/* 通用卡片样式 */
.section-card {
  background: white;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  margin-bottom: 24px;
  overflow: hidden;
}

.card-header {
  background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
  padding: 20px 24px;
  border-bottom: 1px solid #eee;
}

.card-header h2 {
  margin: 0;
  color: #303133;
  font-size: 20px;
  font-weight: 600;
}

.card-content {
  padding: 24px;
}

/* 致谢部分 */
.thanks-text {
  font-size: 16px;
  line-height: 1.8;
  color: #606266;
  margin-bottom: 16px;
}

.thanks-text:last-child {
  margin-bottom: 0;
}

/* 项目介绍 */
.project-desc {
  font-size: 16px;
  line-height: 1.8;
  color: #606266;
  margin-bottom: 20px;
}

.project-status {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

/* 团队网格 */
.team-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 16px;
  margin-bottom: 20px;
}

.team-member {
  background: #f8f9fa;
  padding: 16px;
  border-radius: 8px;
  text-align: center;
  transition: all 0.3s ease;
  border: 1px solid #e9ecef;
}

.team-member:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1);
}

.member-avatar {
  font-size: 32px;
  margin-bottom: 8px;
}

.member-info h4 {
  margin: 0 0 4px 0;
  color: #303133;
  font-size: 16px;
}

.member-info p {
  margin: 0;
  color: #909399;
  font-size: 14px;
}

.team-note {
  background: #f0f9ff;
  padding: 12px 16px;
  border-radius: 8px;
  border-left: 4px solid #3b82f6;
}

.team-note p {
  margin: 0;
  color: #1e40af;
  font-size: 14px;
}

/* 指导教师 */
.teachers-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 20px;
}

.teacher-card {
  background: #f8f9fa;
  padding: 20px;
  border-radius: 8px;
  text-align: center;
  border: 1px solid #e9ecef;
  transition: all 0.3s ease;
}

.teacher-avatar {
  font-size: 40px;
  margin-bottom: 12px;
}

.teacher-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
  background: #fff;
}

.teacher-info h4 {
  margin: 0 0 4px 0;
  color: #303133;
  font-size: 18px;
}

.teacher-title {
  margin: 0 0 8px 0;
  color: #667eea;
  font-weight: 500;
  font-size: 14px;
}

.teacher-desc {
  margin: 0;
  color: #909399;
  font-size: 13px;
  line-height: 1.5;
}

/* 组织介绍 */
.organization-info h3 {
  margin: 0 0 16px 0;
  color: #303133;
  font-size: 20px;
  text-align: center;
}

.values {
  display: flex;
  justify-content: center;
  gap: 12px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}

.value-tag {
  font-size: 14px;
  padding: 8px 16px;
}

.organization-desc {
  text-align: center;
  color: #606266;
  font-size: 16px;
  line-height: 1.8;
  margin: 0;
}

/* 部门介绍 */
.departments-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));
  gap: 20px;
}

.department-card {
  background: #f8f9fa;
  padding: 20px;
  border-radius: 8px;
  border: 1px solid #e9ecef;
  transition: all 0.3s ease;
}

.department-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1);
}

.dept-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
}

.dept-icon {
  font-size: 20px;
}

.dept-header h4 {
  margin: 0;
  color: #303133;
  font-size: 18px;
  flex: 1;
}

.dept-note {
  color: #909399;
  font-size: 12px;
  font-style: italic;
}

.dept-desc {
  margin: 0;
  color: #606266;
  font-size: 14px;
  line-height: 1.6;
}

/* 页脚 */
.page-footer {
  text-align: center;
  padding: 30px 0;
  color: #909399;
  font-size: 14px;
  border-top: 1px solid #eee;
  margin-top: 40px;
}

.page-footer p {
  margin: 4px 0;
}

/* 响应式 */
@media (max-width: 768px) {
  .about-container {
    padding: 16px;
  }

  .page-header {
    padding: 24px 20px;
  }

  .page-header h1 {
    font-size: 24px;
  }

  .card-content {
    padding: 16px;
  }

  .team-grid {
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 12px;
  }

  .teachers-grid {
    grid-template-columns: 1fr;
  }

  .departments-grid {
    grid-template-columns: 1fr;
  }

  .values {
    justify-content: flex-start;
  }
}
</style>